<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div class="container">
    <div class="top-box"></div>
    <div class="title-box yq_ruler">
      <img class="guizeimg" style="width: 3.68rem" v-src="'/static/img/my/h5_guize.png'" alt="">
      <div class="flex-row ruler-item flex-y-center">
        <div class="flex-grow-0">
          <div class="yuan flex-x-center flex-y-center">1</div>
        </div>
        <div class="flex-grow-0 flex-y-center dian-box">
          <span class="dian"></span>
          <span class="dian"></span>
          <span class="dian"></span>
          <span class="dian"></span>
        </div>
        <div class="flex-grow-1 ruler-text">分享您的手机号来邀请好友一起观影看剧。</div>
      </div>
      <div class="flex-row ruler-item flex-y-center">
        <div class="flex-grow-0">
          <div class="yuan flex-x-center flex-y-center">2</div>
        </div>
        <div class="flex-grow-0 flex-y-center dian-box">
          <span class="dian"></span>
          <span class="dian"></span>
          <span class="dian"></span>
          <span class="dian"></span>
        </div>
        <div class="flex-grow-1 ruler-text">好友注册输入你的手机号你可获得3个月会员，会员享更多观影资源。</div>
      </div>
      <div class="flex-row ruler-item flex-y-center">
        <div class="flex-grow-0">
          <div class="yuan flex-x-center flex-y-center">3</div>
        </div>
        <div class="flex-grow-0 flex-y-center dian-box">
          <span class="dian"></span>
          <span class="dian"></span>
          <span class="dian"></span>
          <span class="dian"></span>
        </div>
        <div class="flex-grow-1 ruler-text">分享好友注册人数越多，你获得会员时间越长，更有机会获得永久会员哦。</div>
      </div>
    </div>
    <div class="title-box record yaoqingma">
      <img class="jilu_img" style="width: 3.67rem" v-src="'/static/img/my/yaoqingma.png'" alt="">
      <div class="tips flex-row">
        <div class="flex-grow-0 red">温馨提示：</div>
        <div class="flex-grow-1" style="font-weight: bold">
          截图本页或复制网址,记得提醒朋友注册时填你的手机号哦!
        </div>
      </div>
      <div class="erweima">
        <img v-src="'/static/img/my/erweima.png'" alt="">
      </div>
      <div class="line-box flex-y-center flex-x-center">
        <div class="banyuan left"></div>
        <div class="flex-grow-0 flex-row">
          <div class="diandian " v-for="i in 42"></div>
        </div>
        <div class="banyuan right"></div>
      </div>
      <div class="flex-row flex-x-center">
        <div class="flex-row flex-y-center">
          <div class="right-text">
            分享链接
          </div>
          <div class="swatch flex-row flex-y-center">
            <p class="link">https://dy888.net</p>
            <button type="button"
                    v-clipboard:copy="message"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError"
                    class="copy">复 制</button>
          </div>
        </div>
      </div>
      <!--<div class="flex-row">-->
      <!--<div class="title">用户名</div>-->
      <!--<div class="title">电话号</div>-->
      <!--<div class="title">注册情况</div>-->
      <!--</div>-->
      <!--&lt;!&ndash;jilu &ndash;&gt;-->
      <!--<div style="height: 1.68rem;overflow: hidden">-->
      <!--<vue-seamless-scroll :data="list" :class-option="defaultOption">-->
      <!--<ul>-->
      <!--<li class="flex-row jilu-item" v-for="(item,index) in list" style="width: 7rem">-->
      <!--<div class="title2">{{item.name}}</div>-->
      <!--<div class="title2">{{item.phone | formatphone}}</div>-->
      <!--<div class="title2">成功</div>-->
      <!--</li>-->
      <!--</ul>-->
      <!--<div v-show="show_no_data" class="nodata"-->
      <!--style="text-align: center;width: 7rem;margin-top:0.5rem; color: #b0afb3;">暂无记录-快去邀请吧-->
      <!--</div>-->
      <!--&lt;!&ndash;<div class="flex-row jilu-item" v-for="(item,index) in list">&ndash;&gt;-->
      <!--&lt;!&ndash;&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--</vue-seamless-scroll>-->
      <!--</div>-->
    </div>
    <!--<div class="bottom-box">-->
      <!--<img style="width: 100%" v-src="'/static/img/my/bottom-bg.png'" alt="">-->
      <!--<p class="text">温馨提示：截图本页或复制网址，记得提醒朋友注册时填你的手机号哦!</p>-->
    <!--</div>-->
    <!--<div class="shareToBox">-->
    <!--<img style="width: 4.15rem" v-src="'/static/img/my/arrowto.png'" alt="">-->
    <!--</div>-->
    <!--<div class="bottom-btn-box flex-list">-->
    <!--<div class="btn flex-grow-0 flex-x-center flex-y-center">-->
    <!--<img style="width: .46rem;margin-right: 0.35rem" v-src="'/static/img/my/weixin.png'" alt="">-->
    <!--微信分享-->
    <!--</div>-->
    <!--<div class="btn flex-grow-0 flex-x-center flex-y-center">-->
    <!--<img style="width: .46rem;margin-right:.28rem" v-src="'/static/img/my/qq.png'" alt="">-->
    <!--微信分享-->
    <!--</div>-->
    <!--</div>-->
  </div>
</template>

<script>
  document.title = '邀请好友';
  import {GETREGISTEROK} from 'src/const/uri'

  export default {
    name: "InviteFriends",
    data() {
      return {
        list: [],
        autoPlay: true,
        token: '',
        show_no_data: false,
        message:'https://dy888.net'
      }
    },
    watch: {
      list(val) {
        if (val.length > 0 && val) {
          this.show_no_data = false
        } else {
          this.show_no_data = true
        }
      }
    },
    // computed: {
    //   defaultOption() {
    //     return {
    //       autoPlay: this.autoPlay,
    //       step: 0.5, // 数值越大速度滚动越快
    //       hoverStop: false
    //       // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
    //       // hoverStop: true, // 是否开启鼠标悬停stop
    //       // direction: 1, // 0向下 1向上 2向左 3向右
    //       // openWatch: true, // 开启数据实时监控刷新dom
    //       // singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    //       // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
    //       // waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
    //     }
    //   }
    // },
    mounted() {
      let body = document.body || document.documentElement;
      body.scrollTop = 50;
      // getuid
      // if (window.android) {
      //   this.token = window.android.getToken();
      //   // alert(this.uid);
      //   // window.localStorage.setItem('jcyy_uid',uid);
      //
      //   // alert(uid)
      // } else {
      //   window['getUserToken'] = (token, u_id) => {
      //     this.token = token;
      //     // alert(this.uid);
      //     // this.token = token;
      //
      //   };
      // }
      // if (isDebug) {
      //   this.token = window.localStorage.getItem('jcyy_token')
      //   console.log(this.token);
      //   this.initData();
      // }
    },
    methods: {
      onCopy(e) {
        if (e.text) {
          this.$vux.alert.show({
            title:'复制成功',
            content:'记得提醒朋友注册时填你的手机号哦',
             // content: '复制成功 ' + ' <br/> ' + '邀请好友注册得会员！',
            onShow() {

            },
            onHide() {

            }
          })
        }
      },
      onError(e) {
        this.$vux.alert.show({
          content: '链接地址为:' + `<span style='color:#000;'>${this.message}</span>` + '<br>' + "<span style='font-size:0.24rem'>(请手动复制！)</span>",
          onShow() {

          },
          onHide() {

          }
        })
      }
      // initData() {
      //   this.$ajax.get(GETREGISTEROK, {token: this.token}).then(res => {
      //     this.list = res.data;
      //     console.log(this.list);
      //     if (this.list.length <= 2) {
      //       this.autoPlay = false
      //     } else {
      //       this.autoPlay = true
      //     }
      //   });
      //
      // }
    }
  }
</script>
<style>
  body {
    background: #f6cdd0;
    padding-bottom: 0.4rem;
  }
</style>
<style scoped lang="less">
  .container {
    /*padding-bottom: .6rem;*/
  }

  .top-box {
    width: 100%;
    height: 4.44rem;
    background: url("../../../static/img/my/H5_bg.png") no-repeat top center;
    background-size: 100% 100%;
  }

  .title-box {
    width: 7.02rem;
    min-height: 1rem;
    border-radius: 10px;
    border: 2px solid #fbb1b7;
    margin: 0 auto;
    background: #fff;
  }

  .yq_ruler {
    margin-top: -.88rem;
    position: relative;
    padding-top: .45rem;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: .15rem;

    .ruler-item {
      padding: .1rem 0;
    }

    .yuan {
      width: 19px;
      height: 19px;
      border: solid 1px #ed6d77;
      /*line-height: 19px;*/
      /*text-align: center;*/
      border-radius: 50%;
      font-size: .24rem;
      color: #e82730;
    }

    .dian-box {
      padding: 0 0.05rem;

      .dian {
        display: inline-block;
        width: 2px;
        height: 1px;
        background: #ed6d77;
        margin-left: 2px;
      }
    }

    .ruler-text {
      font-size: .24rem;
      color: #333333;
    }

    .guizeimg {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -0.44rem;
    }
  }

  .record {
    margin-top: 0.62rem;
    position: relative;
    padding-top: .4rem;
    padding-bottom: .1rem;

    .jilu_img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -0.42rem;
    }

    .jilu-item {
      padding: .1rem 0;
    }

    .title, .title2 {
      width: 33.3%;
      text-align: center;
      font-size: .28rem;
      color: #333;
    }

    .title2 {
      font-size: .24rem;
      color: #ea4149;
    }
  }

  .yaoqingma {
    border: none;
    /*height: 5.5rem;*/
    padding-bottom: 0.4rem;
    .tips{
      /*width: 100%;*/
      /*text-align: center;*/
      width: 90%;
      margin:0.1rem auto;
      font-size: 0.24rem;
    }
    .erweima {
      width: 2rem;
      height: 2rem;
      background: #ccc;
      margin: 0.1rem auto 0;
    }

    .line-box {
      height: 0.72rem;
      position: relative;
      overflow: hidden;

      .diandian {
        width: 4px;
        height: 1px;
        background: #999999;
        margin-right: 2px;
        margin-left: 2px;
      }

      .banyuan {
        width: 0.72rem;
        height: 0.72rem;
        background: #f6cdd0;
        border-radius: 50%;
        position: absolute;
        top: 0;

        &.left {
          left: -.36rem;
        }

        &.right {
          right: -.36rem;
        }
      }
    }

    .right-text {
      font-size: 0.24rem;
      color: #000000;
    }

    .swatch {
      width: 3.71rem;
      height: .7rem;
      background-color: #f6cdd0;
      box-shadow: 5px -1px 32px 3.1px rgba(212, 160, 163, 0.89),
      inset 1.4px 1.4px 5px 0.45px rgba(255, 159, 207, 0.7);
      border-radius: 35px;
      overflow: hidden;
      position: relative;
      margin-left: 0.2rem;
      padding-left: 0.3rem;
      z-index: 1000;

      .link {
        font-size: 0.24rem;
        border-bottom: 1px solid #000;
        /*text-decoration: underline;*/
        color: #000;
      }

      .copy {
        width: 1.15rem;
        height: .58rem;
        background-image: linear-gradient(0deg,
        #eeb006 0%,
        #fff33e 100%);
        box-shadow: -0.45px 0.9px 0.36px 0.35px rgba(246, 61, 62, 0.89);
        border-radius: 29px;
        border: none;
        position: absolute;
        top: 50%;
        right: 0.14rem;
        transform: translateY(-50%);
        font-size: 0.24rem;
        color: #000;
        z-index: 1001;
      }
    }
  }

  .bottom-box {
    /*margin-top: -2rem;*/
    /*position: ;*/
    position: fixed;
    left: 0;
    bottom: 0;

    .text {
      position: absolute;
      bottom: 0.14rem;
      left: 50%;
      width: 100%;
      text-align: center;
      transform: translateX(-50%);
      color: #010101;
      font-size: 0.2rem;
    }
  }

  .shareToBox {
    margin: .3rem 0;
    text-align: center;
  }

  .bottom-btn-box {
    padding: 0 .75rem;

    .btn {
      width: 2.68rem;
      height: .68rem;
      background-color: #fff4a4;
      box-shadow: 1.5px 0px 4px 1.5px rgba(230, 179, 182, 0.72);
      border-radius: 34px;
      font-size: .28rem;
      color: #000;
    }
  }


</style>